<template>
  <div class="ItemMusicBottom">
    <div class="ItemMusicBottomhead clearfix">
        <div class="ItemMusicBottomhead_left">
            <div><span class="icon-play1"></span></div>
            <div>播放全部</div>
        </div>
        <div class="ItemMusicBottomhead_right">
            <div>+收藏({{subscribedCount}})</div>
        </div>
    </div>
    <div  @click="getPlayList_vuex(playList); changeIndex($event)" class="ItemMusicBottomList" v-for="(item,index) in playList" :key="item.id" :index="index">
        <div class="ItemMusicBottomList_left">
            <div>{{index+1}}</div>
            <div>
                <div class="songName">{{item.name}}</div>
                <div class="songer"><span v-for="(item,index) in item.ar" :key="index">{{item.name}}&nbsp;</span></div>
            </div>
        </div>
        <div class="ItemMusicBottomList_right">
            <div class="play" v-if="item.mv!=0"><span class="icon-play3"></span></div>
            <div class="menu"><span class="icon-list2"></span></div>
        </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            playList: []
        }
    },
    computed: {
        
    },
    props: ['subscribedCount','id'],
    methods: {
        async getPlayList() {
            await this.$axios.get(`/playlist/track/all?id=${this.id}&limit=20&offset=1`).then(res=>{
                console.log(res);
                this.playList=res.data.songs;
            }).catch(err=>{
                console.log(err);
            })     
        },
        ...mapMutations(['getPlayList_vuex','changeIndex_vuex']),
        changeIndex(e) {
            let i=e.currentTarget.getAttribute("index");
            this.changeIndex_vuex(i);
        }
    },
    created() {
        this.getPlayList();
    },
    mounted() {

    },
}
</script>

<style scoped>
.ItemMusicBottom {
    padding: .2rem;
    width: 100%;
    background-color: #fff;
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
    margin-top: .4rem;
}
.ItemMusicBottomhead {
    width: 100%;
    margin: .2rem 0;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
}
.ItemMusicBottomhead_left {
    float: left;
    display: flex;
    width: 35%;
    justify-content: space-between;
    font-size: .4rem;
    font-weight: 700;
}
.ItemMusicBottomhead_right {
    float: right;
    padding: .1rem;
    background-color: #ff1a00;
    border-radius: .3rem;
    color: #fff;
}
.ItemMusicBottomList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1rem;
    margin: .2rem 0;
}
.ItemMusicBottomList_left {
    display: flex;
    align-items: center;
    width: 65%;
}
.ItemMusicBottomList_left>div:nth-child(1) {
    width: .45rem;
    text-align: center;
}
.ItemMusicBottomList_left>div:nth-child(2) {
    width: 80%;
    margin-left: .4rem;
}
.songName {
    width: 100%;
    font-weight: 700;
    white-space: nowrap;  
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.songer {
    width: 100%;
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .25rem;
}
.ItemMusicBottomList_right {
    display: flex;
    justify-content: space-between;
    opacity: .6;
    font-size: .4rem;
}
.play {
    margin: 0 .4rem;
}
</style>